import { createNamespacedHelpers } from 'vuex'
const { mapGetters, mapActions } = createNamespacedHelpers('txt')
import { cloneDeep } from '@/utils/lodash/Lang'
/**
 * 列表页
 */
export default {
  name: 'List',
  data() {
    return {
      list: [], // 集合
      form: {
        name: '',
      },  // 表单
      dialogType: 'add',  // 对话框类型 add | edit
      dialogVisible: false, // 对话框状态
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: ['blur'] }
        ],
      },  // 规则
      queryForm: {
        name: '',
      },  // 查询表单
    }
  },
  computed: {
    ...mapGetters(['total', 'pagination']),
  },
  methods: {
    ...mapActions(['getCollection']),
    setDialogVisible(flag) {
      this.dialogVisible = flag
    },
    setDialogType(str) {
      this.dialogType = str
    },
    // 获取
    async getList() {
      this.list = []
    },
  },
  async mounted() {
    await this.getList()
  },
  render(h) {
    /** 操作按钮栏 */
    const HandleBar = () => {
      // 重置表单
      const resetForm = () => {
        this.$refs.form.resetFields()
      }
      // 添加
      const addForm = () => {
        this.setDialogType('add')
        this.setDialogVisible(true)
        this.$nextTick(() => resetForm())
      }
      return (
        <el-card>
          <el-button type="primary" icon="el-icon-plus" onClick={addForm}>添加图文</el-button>
        </el-card>
      )
    }

    /** 查询表单 */
    const QueryForm = () => {
      // 查询
      const queryList = () => {
        console.log(this.queryForm)
      }
      // 重置表单及列表
      const resetList = () => {
        this.queryForm = {
          name: '',
        }
        this.list = []
      }
      return (
        <el-form ref="queryForm" inline props={{ model: this.queryForm }}>
          <el-form-item label="名称">
            <el-input value={this.queryForm.name} onInput={v => this.queryForm.name = v} placeholder="请输入名称" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" onClick={queryList}>查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button onClick={resetList}>重置</el-button>
          </el-form-item>
        </el-form>
      )
    }

    /** 表格 */
    const Table = () => {
      // 编辑
      const editForm = (form) => {
        this.setDialogType('edit')
        this.setDialogVisible(true)
        this.form = cloneDeep(form)
      }
      // 删除
      const deleteForm = (form) => {
        this.list = this.list.filter(v => v.id !== form.id)
      }
      // 操作插槽
      const handleSlot = {
        default: (scope) => {
          return (
            <div>
              <el-button type="text" onClick={() => editForm(scope.row)}>编辑</el-button>
              <el-popconfirm
                confirmButtonText='确定'
                cancelButtonText='取消'
                icon="el-icon-info"
                iconColor="red"
                title="确认要删除这一项吗？"
                onOnConfirm={() => deleteForm(scope.row)}
              >
                <el-button slot="reference" type="text" style={{ color: '#F56C6C', marginLeft: '10px' }}>删除</el-button>
              </el-popconfirm>
            </div>
          )
        }
      }
      return (
        <el-card>
          <QueryForm />
          <el-table ref="table" data={this.list} row-key="id">
            <el-table-column prop="name" label="名称" min-width="200" fixed />
            <el-table-column label="操作" scopedSlots={handleSlot} min-width="200" fixed="right">
              <slot />
            </el-table-column>
          </el-table>
          <Pagination total={this.total} pagination={this.pagination} onChange={this.getCollection} />
        </el-card>
      )
    }

    /** 表单对话框 */
    const FormDialog = () => {
      // 关闭
      const onClose = () => {
        this.setDialogVisible(false)
      }
      // 提交
      const submitForm = () => {
        const callback = async(valid) => {
          // 未通过校验
          if (!valid) {
            return false
          }
          // 添加
          if (this.dialogType === 'add') {
            this.list.push({ ...this.form, id: new Date().getTime() })
            this.setDialogVisible(false)
            return
          }
          // 编辑
          const form = cloneDeep(this.form)
          this.list = this.list.map(v => v.id === form.id ? form : v)
          this.setDialogVisible(false)
        }
        this.$refs.form.validate(callback)
      }
      return (
        <el-dialog
          title={this.dialogType === 'add' ? '添加' : '编辑'}
          visible={this.dialogVisible}
          onClose={onClose}
          width="30%"
        >
          <el-form ref="form" label-width="80px" props={{ model: this.form, rules: this.rules }}>
            <el-form-item prop="name" label="名称">
              <el-input value={this.form.name} onInput={v => this.form.name = v} placeholder="请输入名称" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button onClick={onClose}>取消</el-button>
            <el-button type="primary" onClick={submitForm}>确定</el-button>
          </div>
        </el-dialog>
      )
    }

    return (
      <div class="find-txt">
        <HandleBar />
        <Table />
        <FormDialog />
      </div>
    )
  }
}